<template>
  <a-row :gutter="10">
    <a-col :md="leftColMd" :sm="24" >
      <div v-show="!isShowDetail" style="text-align: left;margin-left: 20px;  margin-bottom: -30px;z-index: 1;position:relative">
        <a-tooltip placement="top" title="返回首页">
            <a-icon type="arrow-left" @click="openIndexPage" style="width: 30px;font-size: large;" />
        </a-tooltip>
    </div>
      <a-card :bordered="false"  >
        <a-layout class="layout" :class="[device]">
        <template>
          <a-card style="width: 200px;">
            <a-tree
              draggable
                  :selectedKeys="selectedKeys"
                  :checkStrictly="true"
                  @select="onSelect"
                  :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
                  :treeData="deviceTree"
                  :autoExpandParent="autoExpandParent"
                  :expandedKeys="iExpandedKeys"
                  @expand="onExpand"
                />
          </a-card>
          <!--组织机构-->
          
            <!-- <side-menu
            style="top: 0%;"
          mode="inline"
          :menus="menus"
          :theme="navTheme"
          @menuSelect="menuSelect"
          @updateMenuTitle="handleUpdateMenuTitle"
          :collapsed="false"
          :collapsible="true"></side-menu> -->
        </template>
        <template >
            <a-list 
          :grid="{ gutter: 12, lg: 2, md: 2, sm: 1, xs: 1 }"
          :dataSource="products" style="margin-right: 10px;margin-top: 5px; min-width: 80%;"
        >
          <a-list-item slot="renderItem" slot-scope="item, index">
            <template>
                <ProductListCard :Product="item" @showdetail="openSubMenu" ></ProductListCard>
            </template>
          </a-list-item>
        </a-list>
        </template>
       
      </a-layout>
        <!-- <yks-equipment-list ref="equipmentList" @openSubMenu="openSubMenu"/> -->
      </a-card>
    </a-col>
    <a-col :md="rightColMd" :sm="24" >
      <div style="text-align: left;margin-left: 20px;  margin-bottom: -30px;z-index: 1;position:relative">
          <a-tooltip placement="top" title="返回设备列表">
              <a-icon type="arrow-left" @click="openMainMenu" style="width: 30px;font-size: large;" />
          </a-tooltip>
        </div>
      <a-card :bordered="false" style="margin-right: 100px;">
        <PublishContent  ref="publistContent" :text="Product.publishContent" ></PublishContent>
      </a-card>
    </a-col>
  </a-row>
    
</template>
<script>
import SideMenu from '@/components/menu/SideMenu'
import { mixin, mixinDevice } from '@/utils/mixin.js'
import ProductListCard from '../../components/yks/ProductListCard.vue'
import { httpAction, getAction } from '@/api/manage'
import PublishContent from '../../components/yks/PublishContent.vue';
import JCategorySelect from '@comp/jeecg/JCategorySelect'
export default {
    name: 'IndexYkDevices',
    components: {
    SideMenu,
    ProductListCard,
    PublishContent,
    JCategorySelect
},
    mixins: [mixin, mixinDevice],
    data() {
      return {
        collapsed: false,
        activeMenu:{},
        rightColMd : 0,
        leftColMd : 21,
        text:"明细内容",
        Context:"明细内容",
        Product:{},
        selectedKeys: [],
        deviceTree: [],
        autoExpandParent: true,
        iExpandedKeys: [],
        treeData: [],
        checkedKeys: [],
        menus: [{
            id:"31118BD8B90B4171996AB174663BE575",
            children: [
                    {
                        id: "6FD93786E6FC4D93AE514452BADF5EAC",
                        component: "dashboard/Analysis/IndexYkDevices",
                        menuType: 1,
                        meta: {
                            componentName: "RouteView",
                            internalorExternal: false,
                            keepAlive: false,
                            title: "工业清洗项目"
                        },
                        name: "/dashboard/analysis/IndexYkDevices/D001",
                        path: "/dashboard/analysis/IndexYkDevices/D001",
                        route: "1"
                    },
                    {
                        id: "F501C5C19D634B6BA05AA94D61C90193",
                        component: "dashboard/Analysis/IndexYkDevices",
                        menuType: 1,
                        meta: {
                            componentName: "RouteView",
                            internalorExternal: false,
                            keepAlive: false,
                            title: "油液净化项目"
                        },
                        name: "idevset",
                        path: "/dashboard/analysis/IndexYkDevices/D002",
                        route: "1"
                    },
                    {
                        id: "F501C5C19D634B6BA05AA94D61C90193",
                        component: "dashboard/Analysis/IndexYkDevices",
                        menuType: 1,
                        meta: {
                            componentName: "RouteView",
                            internalorExternal: false,
                            keepAlive: false,
                            title: "集中供液项目"
                        },
                        name: "idevset",
                        path: "/dashboard/analysis/IndexYkDevices/D003",
                        route: "1"
                    }
                ],
            component:"layouts/RouteView",
            menuType:1,
            meta:{
                componentName:"RouteView",
                internalorExternal: false,
                keepAlive: false,
                title:"自动化项目"
            },
            name:"idevset",
            path:"/idevset",
            route:"1"
        },
        {
            id:"036A1353429947439B2ED9BB9FF03C19",
            children: [
                    {
                        id: "6FD93786E6FC4D93AE514452BADF5EAC",
                        component: "dashboard/Analysis/IndexYkDevices",
                        menuType: 1,
                        meta: {
                            componentName: "RouteView",
                            internalorExternal: false,
                            keepAlive: false,
                            title: "废弃处理项目"
                        },
                        name: "idevset",
                        path: "/dashboard/analysis/IndexYkDevices/D005",
                        route: "1"
                    },
                    {
                        id: "F501C5C19D634B6BA05AA94D61C90193",
                        component: "dashboard/Analysis/IndexYkDevices",
                        menuType: 1,
                        meta: {
                            componentName: "RouteView",
                            internalorExternal: false,
                            keepAlive: false,
                            title: "污水处理项目"
                        },
                        name: "idevset",
                        path: "/dashboard/analysis/IndexYkDevices/D004",
                        route: "1"
                    }
                ],
            component:"layouts/RouteView",
            menuType:1,
            meta:{
                componentName:"RouteView",
                internalorExternal: false,
                keepAlive: false,
                title:"环保项目"
            },
            name:"idevconfig",
            path:"/idevconfig",
            route:"1"
        }
    ],
        submenus:[],
        products:[
        //   {
        //     Id:1,
        //     Title:"工业清洗设备",
        //     Detail:"工业清洗设备展示明细内容",
        //     Content:"'## 哈哈![](http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg)'",
        //     Url:"http://www.baidu.com",
        //     ImgUrl:"http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg"
        // },
        // {
        //     Id:1,
        //     Title:"工业清洗设备",
        //     Detail:"工业清洗设备展示明细内容",
        //     Content:"'## 哈哈![](http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg)'",
        //     Url:"http://www.baidu.com",
        //     ImgUrl:"http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg"
        // },
        // {
        //     Id:1,
        //     Title:"工业清洗设备",
        //     Detail:"工业清洗设备展示明细内容",
        //     Content:"'## 哈哈![](http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg)'",
        //     Url:"http://www.baidu.com",
        //     ImgUrl:"http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg"
        // },
        // {
        //     Id:1,
        //     Title:"工业清洗设备",
        //     Detail:"工业清洗设备展示明细内容",
        //     Content:"'## 哈哈![](http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg)'",
        //     Url:"http://www.baidu.com",
        //     ImgUrl:"http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg"
        // },
        // {
        //     Id:1,
        //     Title:"工业清洗设备",
        //     Detail:"工业清洗设备展示明细内容",
        //     Content:"'## 哈哈![](http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg)'",
        //     Url:"http://www.baidu.com",
        //     ImgUrl:"http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg"
        // }
    ],
    allProducts:[],
    url: {
          list: "/mng/yksPublishs/list",
          treeData:"/sys/category/loadTreeRoot",
        },
        equipmentType : '',
        
        isShowDetail:false
      }
    },
    watch: {
      $route:{
        handler: function(nval,oval){
          this.changePage();
        }
      }
    },
    mounted(){
      this.loading = true
      this.loadTree()
      this.loadData(1)
    },
    methods:{
      changePage(){
        debugger
        if (this.$route.path.indexOf("/dashboard/analysis/IndexYkDevices") != -1) {
         let arr = this.$route.path.split("/")
         console.log(arr[arr.length - 1])
         this.equipmentType = arr[arr.length - 1]
        //  this.isSystemRpt = false
        }
         this.loadData(1)
      },
      loadTree() {
        let param = {
          pcode:'B03',
          async:false
        }
        debugger
        var that = this
        that.treeData = []
        that.deviceTree = []
        getAction(this.url.treeData,param).then((res) => {
          debugger
          if (res.success && res.result ) {
            debugger
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              that.treeData.push(temp)
              that.deviceTree.push(temp)
              that.setThisExpandedKeys(temp)
              // console.log(temp.id)
            }
            // debugger
            // let treeList=res.result
            // let root=treeList.filter(p=>p.pid=='0')
            // that.treeData.push(root)
            // that.deviceTree.push(root)
            // this.loadTreeChild(root,treeList)
            // that.setThisExpandedKeys(root)
            // this.loading = false
          }
          that.userIdentity = res.message
        })
      },
      loadTreeChild(parent,result){
              parent.children=result.filter(p=>p.pid=parent.id)
              for (let i = 0; i < parent.children.length; i++) {
                if(parent.children[i].hasChild==1){
                  this.loadTreeChild(parent.children[i],result)
                }
            }
      },
      setThisExpandedKeys(node) {
        //只展开一级目录
        if (node.children && node.children.length > 0) {
          this.iExpandedKeys.push(node.key)
          //下方代码放开注释则默认展开所有节点
          /**
          for (let a = 0; a < node.children.length; a++) {
            this.setThisExpandedKeys(node.children[a])
          }
          */
        }
      },
      onExpand(expandedKeys) {
        this.iExpandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      onSelect(selectedKeys, e) {
        if (this.selectedKeys[0] !== selectedKeys[0]) {
          this.selectedKeys = [selectedKeys[0]];
        }
        let record = e.node.dataRef;
        debugger
        this.products=[]
        this.checkedKeys.push(record.key);
        this.products=this.allProducts.filter(p=>p.selectCategory==record.key)
        // for(var i=0;i<this.allProducts.length;i++){
        //   if(this.allProducts[i].selectCategory==record.id){
        //     this.products.push(this.allProducts[i])
        //   }
        // }
        
        // this.$refs.DeptBaseInfo.open(record);
        // this.$refs.DeptUserInfo.onClearSelected();
        // this.$refs.DeptUserInfo.open(record);
        // this.$refs.DeptRoleInfo.onClearSelected();
        // this.$refs.DeptRoleInfo.open(record);
      },
        menuSelect() {
        if (!this.isDesktop()) {
          this.collapsed = false
        }
      },
      openSubMenu(item){
        debugger
        this.Product=item
         this.rightColMd = 24
         this.leftColMd = 0
        this.isShowDetail=true
      },
      openMainMenu() {
        this.isShowDetail=false
         this.rightColMd = 0
         this.leftColMd = 24
         this.$forceUpdate(); // 手动触发子组件的重新渲染
      },
      openIndexPage(){
        this.$emit("showMain")
      },
      handleUpdateMenuTitle(value) {
        if(value.hasOwnProperty('children')){
          
          this.submenus=value.children
          this.collapsed=true
        }
        else{
          
          this.submenus=[]
          this.collapsed=false
        }
        
      },
      loadData(arg) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          // this.ipagination.current = 1;
        }
        var params = {}//this.getQueryParams();//查询条件
        if(this.equipmentType!="")
        {
          params.equipmentType = this.equipmentType
        }
        params.publishType = "device";
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.products = res.result.records||res.result;
            for(var i=0;i<this.products.length;i++){
              this.products[i].coverimageUrl=window._CONFIG['domianURL']+'/'+this.products[i].coverimageUrl
              this.allProducts.push(Object.assign({}, this.products[i]))
            }
            
            // if(res.result.total)
            // {
            //   this.ipagination.total = res.result.total;
            // }else{
            //   this.ipagination.total = 0;
            // }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
    }
}

</script>

<style lang="less" scoped>
   
        // height: 300px;
        .layout{
          display: flex;
          flex-direction: row;
          
            width: 100%;
            // background-color: black;
            margin-bottom: 200px;
            margin-right: 100px;
        }
    
</style>